<template>
  <div class="Crowdfunding">
    <sponsor
      :cover="sponsor.cover"
      :name="sponsor.name"
      :description="sponsor.description"
      :content="sponsor.content"
    >
    </sponsor>

    <ul class="btnNav">
      <li class="li01" @click="sign" v-html="signText" ref="signStyle"></li>
    </ul>

    <div class="boxnull"></div>
  </div>
</template>

<script>
  import { requestStoreId } from '../../api/api'
  import { baseUrl } from '../../config'

  export default{
    name: 'Crowdfunding',
    data () {
      return {
        hidden: false,
        sponsor: [],
        detailsId: '',
        signText: '我要报名',
        has_reg: false
      }
    },
    mounted: function () {
      this.$nextTick(function () {
        this.loadData()
      })
    },
    methods: {
      loadData: function () {
        let e = this
        requestStoreId(this.$route.query.sponsorsId, {}).then(function (res) {
          e.sponsor = res.data
          e.has_reg = res.data.has_reg
          if (res.data.has_reg !== null) {
            e.signText = '我已报名'
            e.$refs.signStyle.style.background = '#ccc'
            window.location.href = baseUrl + '/detail?sponsorsId=' + e.$route.query.sponsorsId + '&detailId=' + res.data.has_reg.id + '&spreaderId=' + e.$route.query.spreaderId
          }
        })
      },
      sign: function () {
        this.$router.push('/sign?sponsorsId=' + this.$route.query.sponsorsId + '&spreaderId=' + this.$route.query.spreaderId)
      }
    }
  }
</script>

<style lang="less" scoped>
  @in:30.5rem;
  @border:#e8e8e8;
  @font:#8e8e8e;
  @orange:#f1ae9b;
  body{
    background: #fff;
  }
  .boxnull{
    width: 100%;
    height: 3.2rem;
  }
  .Crowdfunding{
    width: 100%;
    height: auto;
    overflow: hidden;
    .banner{
      width: 100%;
      height: 350/2/10rem;
      overflow: hidden;
      img{
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .CrowdfundBox{
      width: 100%;
      height: auto;
      overflow: hidden;
      padding-bottom:15/2/10rem;
      border-bottom:1px solid @border;
      margin:0 auto;
    }
    .CrowdfundIn{
      height: auto;
      overflow: hidden;
      padding:0 1.5rem;
      p{
        font-size:1.2rem;
        margin:15/2/10rem auto;
        color: #000;
      }
      article{
        color: @font;
        font-size:1.1rem;
        text-indent: 2em;
      }
      button{
        float: right;
        color: @orange;
        background: none;
        width: 8rem;
        height: 1.5rem;
        font-size:0.9rem;
      }
    }
    .nav{
      width: 100%;
      height: 50/2/10rem;
      border-bottom:1px solid @border;
      li{
        width: 50%;
        height: 50/2/10rem;
        float: left;
        text-align: center;
        line-height:50/2/10rem;
        font-size:1.2rem;
      }
      .current{
        color: @orange;
      }
    }
    .personBox{
      width: 100%;
      height: auto;
      overflow: hidden;
      border-bottom:1px solid @border;
      .personIn{
        width:@in;
        height: auto;
        overflow: hidden;
        margin:0 auto;
        padding:1rem 0;
        .imgBox{
          width: 3rem;
          height: 3rem;
          border-radius: 50%;
          overflow: hidden;
          float: left;
          margin:0 1.5rem;
          img{
            width: 3rem;
            height: 3rem;
            display: block;
          }
        }
        .font{
          float: left;
          width: 24.5rem;
          .nameBox{
            font-size:1.1rem;
            height: auto;
            overflow: hidden;
            color: #000;
            padding-right:2rem;
            .name{
              float: left;
            }
            .money{
              float: right;
              margin-left:10rem;
              span{
                color: @orange;
              }
            }
          }
          article{
            overflow:hidden;
            text-overflow:ellipsis;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2;
            margin-bottom:0.4rem;
            font-size:1.1rem;
          }
          .time{
            float: right;
          }
        }
      }
    }
    .inputBox{
      width: @in;
      height:60/2/10rem;
      margin:0.5rem auto;
      position: relative;
      border-radius: 0.25rem;
      overflow: hidden;
      .txt{
        width: @in;
        height:60/2/10rem;
        position: absolute;
        left:0;
        top:0;
        background: #ededed;
      }
      .btn{
        width: 200/2/10rem;
        height: 3rem;
        background: @orange;
        position: absolute;
        right:0;
        top:0;
        border-radius: 0.25rem;
        color: #fff;
      }
    }
    .assessBox{
      width: 100%;
      height: auto;
      overflow: hidden;
      border-bottom:1px solid @border;
      .assessIn{
        width: @in;
        height: auto;
        overflow: hidden;
        margin:0 auto;
        padding:15/2/10rem 0;
        .imgBox{
          width: 3rem;
          height: 3rem;
          border-radius: 50%;
          overflow: hidden;
          float: left;
          margin:0 30/2/10rem;
          img{
            width: 3rem;
            height: 3rem;
            display: block;
          }
        }
        .font{
          float: left;
          width: 24.5rem;
          .nameBox{
            font-size:1.1rem;
            height: auto;
            overflow: hidden;
            color: #000;
            .name{
              float: left;
            }
            .money{
              float: left;
              margin-left:10rem;
              span{
                color: @orange;
              }
            }
          }
          article{
            overflow:hidden;
            text-overflow:ellipsis;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2;
            margin-bottom:0.4rem;
            font-size:1.1rem;
          }
          .time{
            float: right;
          }
        }
      }
    }
    .btnNav{
      width: 100%;
      height: 3.2rem;
      position: fixed;
      left:0;
      bottom:0rem;
      li{
        float: left;
        width: 100%;
        height: 3.2rem;
        text-align: center;
        line-height:3.2rem;
        color: #fff;
        font-size:1.2rem;
      }
      .li01{
        background: #96e896;
      }
      .li02{
        background: @orange;
      }
      .used{
        background: #8e8e8e;
      }
    }
    .detailBox{
      width: 100%;
      height: auto;
      overflow: hidden;
      border-bottom:3px solid #ededed;
      position: relative;
      padding-bottom:1rem;
      button{
        color: #f1ae9b;
        background:#fff url(../../assets/images/arrow.png) no-repeat center top;
        -webkit-background-size:1.2rem 13/2/10rem;
        background-size:1.2rem 13/2/10rem;
        float: right;
        width: 5rem;
        padding-top:1rem;
        height: 2.5rem;
        font-size:0.9rem;
        position: absolute;
        right:1rem;
        bottom:0.5rem;
      }
    }
    .detail-in{
      img{
        width: 100%;
        height: auto;
      }
    }
  }

</style>
